<template>
    <a-card class="itemCard">
        <div slot="title">
            {{data.devName}}
            <span class="screenSize">{{data.xdpi}}*{{data.ydpi}}</span>
        </div>
        <div slot="extra">
            <a-space>
                <a-button
                        @click="update(data.devId)"
                        class="nbcs-btn nbcs-btn-primary"
                        v-preventReClick
                >发布</a-button>
                <a-button
                        @click="openScreen(data.devId)"
                        class="nbcs-btn nbcs-btn-primary"
                        v-preventReClick
                >开屏</a-button>
                <a-button
                        @click="closeScreen(data.devId)"
                        class="nbcs-btn nbcs-btn-danger"
                        v-preventReClick
                >关屏</a-button>
            </a-space>
        </div>
        <div>
            <a-table
                    :columns="columns"
                    :data-source="data.playProList"
                    :pagination="false"
                    rowKey="proId"
                    :loading="loading"
            >
                  <span slot="action" slot-scope="text, record">
                      <a v-if="disable(record) == 0" disabled>上移</a>
                      <a v-else @click="move(disable(record),0)">上移</a>
                      <a-divider type="vertical" />
                      <a v-if="disable(record) == data.playProList.length - 1" disabled >下移</a>
                      <a v-else @click="move(disable(record),1)">下移</a>
                      <a-divider type="vertical" />
                      <a @click="preview(record)">预览</a>
                      <a-divider type="vertical" />
                    <a-popconfirm title="确定删除该节目吗？" @confirm="del(disable(record))">
                      <a-icon slot="icon" type="question-circle-o" style="color: red" />
                      <a class="table-red-btn">删除</a>
                    </a-popconfirm>
                  </span>
            </a-table>
            <preview ref="preview"/>
        </div>
    </a-card>
</template>

<script>
    import {update,closeScreen, openScreen} from "@/services/dashbord";
    import preview from "./preview"
    export default {
        name: "programItem",
        props:{
            data:{
                type:Object
            }
        },
        components:{ preview },
        data(){
            return{
                loading: false,
                editFlag:false,
                idArr:[],
                columns: [
                    { title: "节目",dataIndex: "proName" },
                    { title: "操作人员", dataIndex: "operate" },
                    {
                        title: "操作",
                        key: "operation",
                        fixed: "right",
                        width: 300,
                        scopedSlots: { customRender: "action" }
                    }
                ],
            }
        },
        methods:{
            disable(record){
                let index = this.data.playProList.findIndex((value) =>{
                    return value.proId == record.proId
                })
                return index
            },
            closeScreen(devId){
                closeScreen({ids:[devId]}).then( res => {
                    if(res.data.code == 0){
                        this.$message.success("关屏成功")
                    }
                }).catch(err => {
                    console.error(err)
                })
            },
            openScreen(devId){
              openScreen({ids:[devId]}).then( res => {
                if(res.data.code == 0){
                  this.$message.success("开屏成功")
                }
              }).catch(err => {
                console.error(err)
              })
            },
            update(devId){
                if(!this.editFlag){
                    this.idArr = this.data.playProList.map(x => {return x.proId})
                }
                update({devId:devId,proIdList:this.idArr}).then( res => {
                    if(res.data.code == 0){
                        this.$message.success("操作成功")
                        this.editFlag = false
                        this.idArr = []
                    }
                }).catch(err => {
                    console.error(err)
                })
            },
            move(index,direction){
                // direction: 0 上移，1 下移
                this.editFlag = true
                let list = this.data.playProList;
                this.idArr = this.data.playProList.map(x => {return x.proId})
                if (direction == 0) {
                    //上移
                    /**
                     * vue2 解决
                     */
                    list.splice(index-1,1,... list.splice(index, 1 , list[index-1]));
                    this.idArr.splice(index-1,1,... this.idArr.splice(index, 1 , this.idArr[index-1]));
                    /**
                     * Es6方案，适用vue3的响应式可以监听数组变化
                     * [list[index-1],list[index]]=[list[index],list[index-1]];
                     * [this.idArr[index-1],this.idArr[index]]=[this.idArr[index],this.idArr[index-1]];
                     */
                } else {
                    //下移
                    list.splice(index+1,1,... list.splice(index, 1 , list[index+1]));
                    this.idArr.splice(index+1,1,... this.idArr.splice(index, 1 , this.idArr[index+1]));
                }
            },
            del(index){
                if(index>=0){
                    this.editFlag = true
                    this.idArr = this.data.playProList.map(x => {return x.proId})
                    this.data.playProList.splice(index,1)
                    this.idArr.splice(index,1)
                }else{
                    console.error(index)
                }
            },
            preview(record){
                this.$refs['preview'].show(true,record);
            }
        }
    }
</script>

<style lang="less" scoped>
    /*.itemCard{*/
    /*    padding: 5px;*/
    /*}*/
    .screenSize{
        color:#bfbfbf ;
        margin-left: 8px;
    }
</style>
